<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height: 300px;
            border: 1px solid #000;
            /* 默认椭圆 */
            /* background-image:radial-gradient(at 200px 150px,red,green); */
            /* 指定圆 */
            /* background-image:radial-gradient(circle at 200px 150px,red,green); */
            /* 将椭圆形定在9个方位 */
            /* background-image:radial-gradient(at left top,red,green); */
            /* background-image:radial-gradient(at 100px 80px,yellow,red ); */
            /* background-image: radial-gradient(100px at 80px 90px,red 0%,white 100%); */
            /* background-image: radial-gradient(150px at 200px 150px,red 50%,white 50%); */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>